<template>
  <el-drawer v-model="open" :title="title" size="50%" @close="onClose">
    <el-descriptions :column="1" border>
      <el-descriptions-item :label="$t('partner.name')">{{ form.name }}</el-descriptions-item>
      <el-descriptions-item :label="$t('partner.code')">{{ form.code }}</el-descriptions-item>
      <el-descriptions-item :label="$t('partner.phone')">{{ form.phone }}</el-descriptions-item>
      <el-descriptions-item :label="$t('partner.partnerType')">
        <el-tag v-if="form.partnerType === 'VIP'">会员</el-tag>
        <el-tag v-else-if="form.partnerType === 'FLOW'">流量</el-tag>
        <el-tag v-else-if="form.partnerType === 'API'">API接入</el-tag>
        <span v-else>{{ form.partnerType }}</span>
      </el-descriptions-item>
      <el-descriptions-item :label="$t('partner.cashierType')">
        <el-tag v-if="form.cashierType === 'IN'">内部收银</el-tag>
        <el-tag v-else-if="form.cashierType === 'OUT'">外部收银</el-tag>
        <span v-else>{{ form.cashierType }}</span>
      </el-descriptions-item>
      <el-descriptions-item :label="$t('partner.channelId')">{{ form.channelId }}</el-descriptions-item>
      <el-descriptions-item :label="$t('partner.status')">
        <el-tag :type="form.status === 1 ? 'success' : 'info'">
          {{ form.status === 1 ? $t('jbx.text.enable') : $t('jbx.text.disable') }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item :label="$t('partner.sort')">{{ form.sort }}</el-descriptions-item>
      <el-descriptions-item :label="$t('partner.address')">{{ form.address }}</el-descriptions-item>
      <el-descriptions-item :label="$t('partner.remark')">{{ form.remark }}</el-descriptions-item>
      <el-descriptions-item :label="$t('jbx.text.createdDate')">{{ parseTime(form.createdDate) }}</el-descriptions-item>
      <el-descriptions-item v-if="form.modifiedDate" :label="$t('jbx.text.modifiedDate')">{{ parseTime(form.modifiedDate) }}</el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="onClose">{{ $t('jbx.text.close') }}</el-button>
    </template>
  </el-drawer>
</template>

<script setup name="PartnerDetail" lang="ts">
import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import { parseTime } from "@/utils/Jinbooks";
import { getPartner } from "@/api/channel/partner";

const { t } = useI18n();

const open = ref(false);
const form = ref({});

const props = defineProps<{
  title?: string
  open?: boolean
  formId?: string
}>();

const emit = defineEmits(['update:open']);

watch(
    () => props.open,
    (val) => {
      if (val) {
        open.value = val
        if (props.formId) {
          getPartner(props.formId).then((response: any) => {
            form.value = response.data;
          });
        }
      } else {
        open.value = false;
      }
    },
    { immediate: true }
);

function onClose() {
  open.value = false;
  emit('update:open', false);
}
</script>